<template>
<div class="login-vue" :style="bg">
  <div class="container">
    <p class="title">WELCOME</p>
    <div class="input-c">
      <Input prefix="ios-contact" v-model="params.name" placeholder="用户名" clearable />
      <p class="error">{{accountError}}</p>
    </div>
    <div class="input-c">
      <Input type="password" v-model="params.pwd" prefix="md-lock" placeholder="密码" clearable @keyup.enter.native="Login" />
      <p class="error">{{pwdError}}</p>
    </div>
    <Button class="submit" type="primary" @click="Login">登陆</Button>
    <p class="account">
      <a href="http://www.kirrito.top/moguh5/#/Register">
        <span @click="register">注册账号</span> | <span @click="forgetPwd">忘记密码</span>
      </a>
      </p>
  </div>
</div>
</template>

<script>
import conf from '@/api/apiConf'

// const params= {
//       name: 'admin',
//       pwd: 123123,
//     },
export default {
  name: 'login',
  data: () => ({
    params: {
      name: '',
      pwd:''
    },
    accountError: '',
    pwdError: '',
    isShowLoading: false,
     bg: {},
  }),

  created() {
    this.bg.backgroundImage =  `url(/mogu/upload/cafe/bg0${new Date().getDay()}.jpg)`
  },
  watch: {
    $route: {
      handler(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true,
    },
  },
  methods: {
    async Login() {
      if (this.params.name === '' || this.params.pwd === '') {
        this.$Message.success('账号或密码不能为空')
      } else {
        let params = new URLSearchParams()
        params.append('name', this.params.name)
        params.append('pwd', this.params.pwd)
        // this.$http.headers['token'] = localStorage.getItem('token')
        // console.log(this.$http)
        const res = await this.$http.post(conf.Login, params)
        //登录失败提示
        if (res.data.status !== 200) return this.$Message.warning('登录失败')

        //登录成功提示
          this.isShowLoading = true
          // 登陆成功后把 token 保存到客户端的 localStorage中
          localStorage.setItem('userImg', res.data.data.user.u_photo)
          localStorage.setItem('userName', res.data.data.user.u_nick)
          // 登陆成功 假设这里是后台返回的 token
          localStorage.setItem('token', res.data.data.token)
        
        //获取菜单
        this.$store.dispatch('queryMenus',{
          succ:()=>{
            this.$Message.success('登录成功')
            this.$router.push({
              path: this.redirect || '/',
            })
          },
          fail:()=>{
            localStorage.removeItem('token')
            this.$Message.warning('获取菜单失败')
          }
        })
      }
    },
    register() {},
    forgetPwd() {},
  },
}
</script>

<style>
.login-vue {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background-size: cover;
}

.login-vue .container {
  border:1px solid #746666;
  background: rgb(58 56 56 / 50%);
  width: 300px;
  text-align: center;
  border-radius: 10px;
  padding: 30px;
}

.login-vue .ivu-input {
  background-color: transparent;
  color: #fff;
  outline: #fff;
  border-color: #fff;
}

.login-vue ::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: rgba(255, 255, 255, 0.8);
}

.login-vue :-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: rgba(255, 255, 255, 0.8);
}

.login-vue ::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: rgba(255, 255, 255, 0.8);
}

.login-vue :-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: rgba(255, 255, 255, 0.8);
}

.login-vue .title {
  font-size: 16px;
  margin-bottom: 20px;
}

.login-vue .input-c {
  margin: auto;
  width: 200px;
}

.login-vue .error {
  color: red;
  text-align: left;
  margin: 5px auto;
  font-size: 12px;
  padding-left: 30px;
  height: 20px;
}

.login-vue .submit {
  width: 200px;
}

.login-vue .account {
  margin-top: 30px;
}

.login-vue .account span {
  cursor: pointer;
}

.login-vue .ivu-icon {
  color: #eee;
}

.login-vue .ivu-icon-ios-close-circle {
  color: #777;
}
</style>
